<template>
  <div class='container'>
    <el-card class="box-card">
      <div style="width:100%;" v-if="isNone">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>学科名称</el-breadcrumb-item>
          <el-breadcrumb-item>{{this.$store.state.classificationName}}</el-breadcrumb-item>
          <el-breadcrumb-item>标签管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
        <strong style="fontSize: 14px" class="box-strong">目录名称</strong>
        <el-input v-model="queryInfo.directoryName" class="box-ipt"></el-input>
        <strong style="fontSize: 14px" class="box-strong">状态</strong>
        <el-select v-model="value" placeholder="请选择" class="elselect">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-button size="small" @click="eliminate">清除</el-button>
        <el-button type="primary" size="small" @click="search">搜索</el-button>
        <el-button type="success" icon="el-icon-edit" size="small" @click="addFormVisible=true"  style=" float: right;">新增目录</el-button>
        <el-button type="text" v-if="isNone" style=" float: right;" @click="goSubject">⬅返回学科</el-button>
        <el-alert :title="'数据一共'+counts+'条'" type="info" show-icon :closable="false" class="box-alert"></el-alert>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="index" width="50" label="序号"> </el-table-column>
          <el-table-column prop="subjectName" label="所属学科"> </el-table-column>
          <el-table-column prop="directoryName" label="目录名称"> </el-table-column>
          <el-table-column prop="username" label="创建者" ></el-table-column>
          <el-table-column prop="addDate" label="创建日期" :formatter="dateFormat"> </el-table-column>
          <el-table-column prop="totals" label="面试题数量"> </el-table-column>
          <el-table-column prop="state" label="状态" :formatter="isOr"> </el-table-column>
          <el-table-column label="操作" width="270">
            <template slot-scope="scope">
              <!--@click="goClassification"      @click="goLabel" -->
              <el-button type="text" @click="isonBtn(scope.row)">{{scope.row.state===1?'禁用':'启用'}}</el-button>
              <el-button type="text" @click="modify(scope.row)" :disabled="scope.row.state===0?false:true">修改</el-button>
              <el-button type="text" @click="deleteBtn(scope.row.id)"  :disabled="scope.row.state===0?false:true">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
       <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.page" :page-sizes="[10, 20, 30, 40]" :page-size="queryInfo.pagesize" layout=" prev, pager, next,sizes, jumper" :total="400" class="paging-right"></el-pagination>
    </el-card>
    <!-- 目录修改弹窗 -->
    <el-dialog title="修改目录" :visible.sync="dialogFormVisible" width="400px" @close="editHandleClose">
      <el-form :model="ruleForm" :rules="rules" ref="editRuleFormref" label-width="100px" class="elform">
        <el-form-item label="所属学科" prop="subjectName">
           <el-select v-model="ruleForm.subjectID" placeholder="请选择" style="width:100%">
             <el-option v-for="item in listData" :key="item.value" :label="item.label " :value="item.value"></el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="subjectName">
          <el-input v-model="ruleForm.directoryName"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editParameter">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 新增目录 -->
     <el-dialog title="添加目录" :visible.sync="addFormVisible" width="400px" @close="addHandleClose">
      <el-form :model="addRuleForm" :rules="rules" ref="editRuleFormref" label-width="100px" class="elform">
        <el-form-item label="所属学科" prop="subjectName">
           <el-select v-model="addRuleForm.subjectID" placeholder="请选择" style="width:100%">
             <el-option v-for="item in listData" :key="item.value" :label="item.label " :value="item.value"></el-option>
           </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="subjectName">
          <el-input v-model="addRuleForm.directoryName" placeholder="请输入目录名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="addFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addSubject">确 定</el-button>
      </div>
    </el-dialog>
    </div>
</template>

<script>
import { list, remove, add, update, changeState } from '@/api/hmmm/directorys'
import { simple } from '@/api/hmmm/subjects'
export default {
  data () {
    return {
      // 面包屑显示隐藏
      isNone: null,
      options: [{
        value: 1,
        label: '已启用'
      }, {
        value: 0,
        label: '已禁用'
      }],
      value: null,
      counts: '',
      // 获取学科列表参数
      queryInfo: {
        page: 1,
        pagesize: 10,
        directoryName: '',
        state: null,
        subjectID: null
      },
      // 表格数据
      tableData: [],
      // 修改的弹框
      dialogFormVisible: false,
      // 学科下拉列表
      listData: [],
      // 修改下拉框
      value1: '',
      // 输入的内容
      ruleForm: { id: 0, directoryName: '', subjectID: '' },
      // 验证规则
      rules: {
        directoryName: [{ required: true, message: '请输入学科名称', trigger: 'blur' }]
      },
      // 添加的弹框
      addFormVisible: false,
      // 添加的数据
      addRuleForm: {
        directoryName: '',
        subjectID: null
      },
      addRules: {
        directoryName: [{ required: true, message: '请输入活动名称', trigger: 'blur' }]
      }
    }
  },
  created () {
    this.getSubjectList()
  },
  methods: {
    // 分页
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.queryInfo.pagesize = val
      this.getSubjectList()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.queryInfo.page = val
      this.getSubjectList()
    },
    // 获取列表
    async getSubjectList () {
      this.$store.state.labelName = null
      this.$store.state.labelId = null
      this.queryInfo.subjectID = null
      this.queryInfo.subjectID = this.$store.state.classificationId
      this.$store.state.classificationId === null ? this.isNone = false : this.isNone = true
      const { data: res } = await list(this.queryInfo)
      console.log(res)
      // console.log(res.state)
      // res.items.state === 1 ? this.isOn = false : this.isOn = true
      this.counts = res.counts
      this.tableData = res.items
      const { data: res1 } = await simple()
      this.listData = res1
    },
    // 格式化时间
    dateFormat (row) {
      const strval = row.addDate.substring(0, 10) + ' ' + row.addDate.substring(11, 19)
      return strval
    },
    // 是否
    isOr (row) {
      return row.state === 1 ? '已启用' : '已禁用'
    },
    // 清除内容
    eliminate () {
      this.queryInfo.directoryName = ''
      this.value = null
      this.queryInfo.state = null
      console.log(this.value)
      this.getSubjectList()
    },
    // 搜索
    search () {
      this.queryInfo.state = this.value
      this.getSubjectList()
    },
    // 监听编辑关闭事件
    editHandleClose () {
      this.$refs.editRuleFormref.resetFields()
      this.ruleForm.directoryName = ''
    },
    // 修改
    async modify (row) {
      this.dialogFormVisible = true
      console.log(row)
      this.ruleForm.id = row.id
      this.ruleForm.subjectID = row.subjectID
      this.ruleForm.directoryName = row.directoryName
    },
    // 删除
    deleteBtn (id) {
      console.log(id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const { data: res } = await remove({ id: id })
        if (res.success !== true) {
          this.$message.error('删除失败')
        }
        this.$message.success('删除成功')
        console.log(res)
        this.getSubjectList()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 修改提交事件
    async editParameter () {
      const { data: res } = await update(this.ruleForm)
      console.log(res)
      if (res.success !== true) {
        return this.$message.error('更新失败')
      }
      this.$message.success('更新成功')
      this.dialogFormVisible = false
      this.getSubjectList()
    },
    // 添加提交事件
    async addSubject () {
      await add(this.addRuleForm)
      this.$message.success('添加成功')
      this.addFormVisible = false
      this.getSubjectList()
    },
    // 监听关闭按钮
    addHandleClose () {
      this.addRuleForm.directoryName = ''
      this.addRuleForm.subjectID = null
      this.addFormVisible = false
    },
    // 禁用启用按钮
    async isonBtn (row) {
      row.state === 1 ? row.state = 0 : row.state = 1
      const { data: res } = await changeState({ id: row.id, state: row.state })
      if (res.success !== true) {
        return this.$message.error('修改状态失败')
      }
      this.$message.success('修改状态成功')
      this.getSubjectList()
    },
    // 返回学科
    goSubject () {
      this.$router.push({ name: 'subjects-list' })
    }
  }

}
</script>

<style scoped lang='less'>
.box-strong{
  margin-left: 10px;
}
.box-ipt{
  display: inline-block;
  padding: 0 10px;
  width:230px;
}
.box-alert{
  margin: 20px 0px;
}
.paging-right{
  float: right;
  margin: 15px;
}
.elform{
  margin-left: -23px;
}
.elselect{
  margin: 15px;
}
</style>
